<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>主页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-weight: 700; color: #515a6e"
        >系统公告</el-breadcrumb-item
      ><br />
      <el-card class="box-card">
        <el-row>
          <el-button type="primary" @click="dialogFormVisible = true"
            >添加公告</el-button
          >
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="">
              <el-input v-model="search" placeholder="搜索关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getListd">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <div class="form">
          <el-table
            border
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
              :header-cell-style="getRowClass"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="content" label="内容" width="305">
            </el-table-column>
            <el-table-column prop="topfix" width="305">
              <template slot-scope="scope">
                <span v-if="scope.topfix == 1">置顶</span>
                <span v-if="scope.topfix == 2">未置顶</span>
              </template>
            </el-table-column>

            <el-table-column prop="ctime" label="创建时间" width="305">
              <template slot-scope="scope">
                {{ scope.row.ctime.substring(0, 10) }}
                {{ scope.row.ctime.substring(11, 19) }}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="305"
            >
              <template slot-scope="alter">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-search"
                  @click="editList(alter.row)"
                  ><span>编辑</span></el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                  @click="del(alter.row)"
                  ><span>删除</span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </el-breadcrumb>
    <!-- 添加公告开始 -->
    <el-dialog title="添加公告" :visible.sync="dialogFormVisible">
      <el-form v-model="uploadForm">
        <el-form-item label="添加分类" :label-width="formLabelWidth">
          <el-input
            v-model="uploadForm.content"
            autocomplete="off"
            placeholder="请输入公告内容"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="是否置顶" :label-width="formLabelWidth">
          <el-input
            v-model="uploadForm.topfix"
            autocomplete="off"
            placeholder="请输入公告内容"
          ></el-input>
        </el-form-item> -->

        <el-form-item label="是否置顶">
          <el-switch
            v-model="value2"
            active-color="#2d8cf0"
            inactive-color="#cccccc"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = false;
            addGong();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加公告结束 -->
  </div>
</template>


<script>
import { getListd, deleteList, addGong, editgong } from "@/api/one.js";
export default {
  name: "TwoView",
  data() {
    return {
      page: 0,
      size: 10,
      tableData: [],
      total: 10,
      search: "",
      value3: true,
      value2: true,
      dialogFormVisible: false,
      uploadForm: [],
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getListd();
  },
  watch: {
    search(search) {
      this.getListd(search);
      if (!search) {
        this.videos;
        return;
      }
    },
  },
  methods: {
    async getListd() {
      const ruleForm = {
        _orderd: "ctime",
        _page: this.page,
        _size: this.size,
      };
      //搜索
      if (this.search) {
        ruleForm._search = this.search;
        const res = await getListd(ruleForm);
        if (res.code === 1) {
          console.log(res);
          this.tableData = res.list;
          this.total = res.pager.total;
        }
      }
      const res = await getListd(ruleForm);
      if (res.code === 1) {
        console.log(res);
        this.tableData = res.list;
        this.total = res.pager.total;
      }
    },
    handleSizeChange(page) {
      this.size = page;
      this.getListd();
    },
    handleCurrentChange(size) {
      this.page = size;
      this.getListd();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //删除项，handleDel（）是点击事件
    async del(data) {
      const confirmBtn = {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      };
      const confirmRes = await this.$confirm(
        `确定要删除内容为 【${data.content}】 创建时间是【${data.ctime}】 的数据吗, 是否继续?`,
        "提示",
        confirmBtn
      );
      if (confirmRes) {
        const delRes = await deleteList({ id: data.id });
        if (delRes && delRes.code == 1) {
          this.getListd();
          this.$message({
            type: "success",
            message: "删除成功",
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      }
    },
    //新增
    addGong() {
      const h = {
        content: this.uploadForm.content,
        topfix: this.value2.topfix,
      };
      if (this.edit) {
        this.edit = false;
        editgong(h, this.id);
      } else {
        addGong(h);
      }
      this.uploadForm = [];
      this.dialogImageUrl = "";
      this.getListd();
      this.dialogVisible = false;
    },
    //编辑
    editList(row) {
      (this.uploadForm = row),
        (this.id = this.uploadForm.id),
        (this.dialogImageUrl = this.uploadForm.cover),
        (this.dialogFormVisible = true),
        (this.edit = true);
    },
      //设置表头背景颜色
    getRowClass() {
      return "background: #F8F8F9;border:#black;color:515A6E;";
    },
    // 处理时间
    getCtime(cTime) {
      const time = Date.parse(cTime);
      var date = new Date(time);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },
    handlePicture(response) {
      const res = { ...response.files };
      console.log(res);
      this.dialogImageUrl = res[0].url;
      this.dialogVisible = true;
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-breadcrumb .el-card {
  margin-top: 30px;
  // height: 100%;
}

.el-card .el-row .el-button {
  float: left;
}

.el-card .el-row .el-form {
  float: right;
}

.block {
  margin-top: 20px;
}
</style>
